<template>
  <a-modal
    v-model:open="modalVisible"
    centered
    :keyboard="false"
    :maskClosable="false"
    :closable="true"
    width="100vw"
    wrap-class-name="preview-full-modal"
    :footer="false"
    v-bind="$attrs"
  >
    <div class="browser-wrapper">
      <div class="address-wrapper">
        <a-input
          size="mini"
          v-model:value="url"
          style="margin-bottom: 10px"
        ></a-input>
      </div>
      <div class="browser-content">
        <iframe width="100%" height="900px" :src="url" />
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { nextTick, ref, watch, computed } from "vue";
const props = defineProps({
  modelValue: { type: Boolean, default: false },
});
const emits = defineEmits(["update:modelValue"]);

const modalVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    return emits("update:modelValue", val);
  },
});

const url = ref(
  // "https://hdoxfy.axshare.com/?id=mrks62&p=%E9%A1%B5%E9%9D%A2%E7%B4%A2%E5%BC%95"
  "http://192.168.99.231/ckgl/#id=pjte2x&p=%E5%AE%9E%E9%AA%8C%E5%AE%A4%E6%A1%86%E6%9E%B6_1&g=1"
);
</script>

<style lang="less">
.address-wrapper {
  box-sizing: border-box;
  padding-right: 20px;
}
.browser-wrapper {
  height: 100%;
  overflow-y: auto;
}
</style>
